<script setup lang="ts">
import axios from '../axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import { router } from '../router';
import { Template } from '../model';

const PAGE_COUNT = 10;
const pageCount = ref(0)
const currentPage = ref(1)

const tableData = ref<Template[]>([])

const loadData = async (page: number = 1) => {
    // 请求数据
    const res = await axios.get('/template')
    if (!res.data['ok']) {
        ElMessage({
            type: 'error',
            message: '加载模板数据失败',
        })
        return
    }

    // 计算分页显示的数据
    const allTemplates: Template[] = res.data['templates']
    tableData.value = allTemplates.slice((page - 1) * PAGE_COUNT, page * PAGE_COUNT)

    // 刷新分页数
    pageCount.value = Math.ceil(allTemplates.length / PAGE_COUNT)

}

loadData()

</script>

<template>
    <div class="application-new-page">
        <div class="application-new-header">
            <el-page-header
                title="返回"
                @back="router.back()"
            >
                <template #content>
                    可发起申请列表
                </template>
            </el-page-header>
        </div>
        
        <el-divider />
        <el-table
            :data="tableData"
        >
            <el-table-column label="审批流名称" prop="tableName" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="创建时间" prop="creationTime" />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button @click="router.push(`/application/new/fill/${scope.row.id}`)">发起请求</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :page-count="pageCount"
            @current-change="loadData"
            />

    </div>
</template>

<style scoped>
.application-new-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}
.el-table {
    height: calc(100% - 100px);
    width: calc(100% - 100px);
    overflow: auto;
}
.el-pagination {
    height: 100px;
    margin-bottom: 20px;
}

.application-new-header {
    width: calc(100% - 50px);
    padding-top: 20px;
}
</style>